﻿<template>
  <div class="homeicons">
    <swiper>
      <!-- <swiper-slide v-for="(page,index) of pages" :key="index"> -->
      <swiper-slide>
        <div class="icon" v-for="item of list" :key="item.id">
        <!-- <div class="icon" v-for="item of page" :key="item.id"> -->
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl">
          </div>
          <p class="icon-desc">{{item.title}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props:{
    list:Array
  },
  data() {
      return {
        // iconList: [
        //   {
        //     id: "01",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/piao.png",
        //     // imgUrl: require("@/assets/images/piao.png"),
        //     title: "售票"
        //   }, {
        //     id: "02",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        //     // imgUrl: require("@/assets/images/hotel.png"),
        //     title: "酒店"
        //   }, {
        //     id: "03",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",
        //     // imgUrl: require("@/assets/images/package.png"),
        //     title: "度假"
        //   },{
        //     id: "04",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/train.png",
        //     // imgUrl: require("@/assets/images/train.png"),
        //     title: "火车/高铁"
        //   }, {
        //     id: "05",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/flight.png",
        //     // imgUrl: require("@/assets/images/flight.png"),
        //     title: "飞机票"
        //   },
        //   {
        //     id: "06",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/train.png",
        //     // imgUrl: require("@/assets/images/train.png"),
        //     title: "火车/高铁"
        //   }, {
        //     id: "07",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/flight.png",
        //     // imgUrl: require("@/assets/images/flight.png"),
        //     title: "飞机票"
        //   }, {
        //     id: "08",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",
        //     // imgUrl: require("@/assets/images/collection.png"),
        //     title: "攻略"
        //   },{
        //     id: "09",
        //     imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",
        //     // imgUrl: require("@/assets/images/collection.png"),
        //     title: "攻略"
        //   }, {
        //     id: "10",
        //     // imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",
        //     imgUrl: require("@/assets/images/collection.png"),  //require('路径')即可显示图片
        //     title: "攻略"
        //   }, 
        // ],
        swiperOption: {
          pagination: ".swiper-pagination",
          autoplay: false
        }
      };
    },
    computed: {
      pages(){
        const pages = []; // pages是为二维数组
        this.iconList.forEach((item, index) => {
          const page = Math.floor(index / 8); // page本质是0.1.2.3分别表示第1,2,3,4页
          if (!pages[page]) {
            pages[page] = [];
          }
          pages[page].push(item);
        });
        return pages;
      }
    }
}
</script>

<style lang="stylus" scoped>
.homeicons
    background #ffffff
    padding .2rem 0
    border-bottom-left-radius .2rem
    border-bottom-right-radius .2rem
.icon
    width 25%
    height 1.6rem
    float left
    text-align center
    margin-top .2rem
.icon-img img
    width 1.2rem
    height 1rem
.icon-desc
    margin-top .1rem
</style>